<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../../../js/class/vue.min.js" charset="UTF-8"></script>
	</head>
	<body>
		<!-- HTML 绑定 Vue实例，在页面加载时会闪烁
			{{msg}}
		然后才会出现 加载完成 字样，和css
		[v-cloak]{
			display: none;
		}
		一起使用可以解决此问题-->
		
		<!-- 这个指令保持在元素上直到关联实例结束编译。
		和 CSS 规则如 [v-cloak] { display: none } 一起用时，
		这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 -->
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
		
		<div id="vue-app">
			<div v-cloak>
				信息：
				<div>
					{{message}}
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			"use strict"
			setTimeout(function(){
				var vm = new Vue({
					el: "#vue-app",
					data: {
						message:"hello world",
					},
				})
			},1500)
			/* 在实际项目中，我们常通过 @import 来加载 css 文件
				@import "style.css"
				@import "index.css"
				而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。 */
		</script>
	</body>
</html>